<template>
  <div id="ProcessList">
    <Table border :columns="columns1" :data="ajaxdata" :no-data-text="$t('order.nodata')"
           :no-filtered-data-text="$t('order.nodata')" :loading="loading" @on-row-dblclick="show"></Table>
    <Page :total="total" :page-size="20" show-elevator show-total style="float: right;margin: 20px" @on-change="handleinit"/>
  </div>
</template>
<script>
  import util from '@/util/toast'

  export default {
    name:"ProcessList",
    data() {
      return {
        loading: true,
        columns1: [
          {
            key: "statedesc",
            width: 100,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.statedesc'))
            }
          },
          {
            key: "PONumber",
            title: this.$t('order.PONumber'),
            width: 200,
            align: "center",
            render: (h, params) => {
              return h('a', {
                on: {
                  click: () => {
                    this.show(params.row)
                  }
                }
              }, params.row.PONumber)
            }
          },
          {
            key: "POVersionNumber",
            width: 150,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.POVersionNumber'))
            }
          },
          {
            key: "senderName",
            width: 250,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.senderName'))
            }
          },
          {
            key: "senderPerson",
            width: 120,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.senderPerson'))
            }
          },
          {
            key: "recipient",
            width: 300,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.recipient'))
            }
          },
          {
            key: "latestUpdateDateTime",
            width: 170,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.latestUpdateDateTime'))
            }
          },
          {
            key: "T1Customer",
            width: 110,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.T1Customer'))
            }
          },
          {
            key: "currency",
            width: 100,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.currency'))
            }
          },
          {
            key: "buyerContactPerson",
            width: 170,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.buyerContactPerson'))
            }
          },
          {
            key: "actualManufacturerCode",
            width: 180,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.actualManufacturerCode'))
            }
          },
          {
            key: "buyerContactEmail",
            width: 160,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.buyerContactEmail'))
            }
          },
          {
            key: "actualManufacturerUser",
            width: 180,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.actualManufacturerUser'))
            }
          },
          {
            key: "POReviseDate",
            width: 130,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.POReviseDate'))
            }
          },
          {
            key: "season",
            width: 100,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.season'))
            }
          },
          {
            key: "action",
            fixed: 'right',
            width: 150,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.action'))
            },
            render: (h, params) => {
              let button = ''
              if (this.userdata.Type != 'admin'){
                button = [h('Button', {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.acceptmodify(params.row)
                    }
                  }
                }, this.$t('order.accept')),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.denymodify(params.row)
                    }
                  }
                }, this.$t('order.deny'))]
              }
              if (this.userdata.Type == 'admin') {
                button = [h('Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.show(params.row)
                    }
                  }
                }, this.$t('order.edit'))]
              }
              return h('div', [
                button
              ]);
            }
          }
        ],
        ajaxdata: [],
        total: 0,
        searchValue: '',
        searchKey: '',
        userdata: eval("(" + localStorage.getItem('userinfo') + ")")
      }
    },
    computed:{
    },
    methods: {
      show(data){
        this.$router.push({name: 'ProcessDetail',params: {id:data.PONumber}})
      },
      acceptmodify(data){
        let $data = {
          opertype: 'buyeracceptmodify',
          BillID: data.BillID,
          BillNum: data.PONumber,
          email: this.userdata.Email
        }
        let $params = {
          params: $data
        }
        let $url = 'P_OperationBill.asp'
        this.$Modal.confirm({
          title:this.$t('order.accept_title'),
          content:this.$t('order.accept_content'),
          okText:this.$t('common.yes'),
          cancelText:this.$t('common.no'),
          onOk:()=>{
            this.$axios.get($url, $params).then((res) => {
              if(res.data.code === 0){
                this.handleinit()
              }
            })
          }
        });
      },
      denymodify(data){
        let $data = {
          opertype: 'buyerdenymodify',
          BillID: data.BillID,
          BillNum: data.PONumber,
          email: this.userdata.Email
        }
        let $params = {
          params: $data
        }
        let $url = 'P_OperationBill.asp'
        this.$Modal.confirm({
          title:this.$t('order.deny_title'),
          content:this.$t('order.deny_content'),
          okText:this.$t('common.yes'),
          cancelText:this.$t('common.no'),
          onOk:()=>{
            this.$axios.get($url, $params).then((res) => {
              if(res.data.code === 0){
                this.handleinit()
              }
            })
          }
        });
      },
      handleinit(page) {
        this.loading = true
        let $userdata = localStorage.getItem('userinfo')
        $userdata = eval("(" + $userdata + ")")
        let $email = $userdata.Email
        let $Type = $userdata.Type
        let $data = {
          page: page ? page : 1,
          limit: 20,
          email: $email,
          type: $Type
        }
        let $params = {
          params: $data
        }
        let $url = 'P_Processlist.asp'
        if ($Type == 't1') {
          $url = 'P_ProcesslistT1.asp'
        } else if ($Type == 't2') {
          $url = 'P_ProcesslistT2.asp'
        }

        this.$axios.get($url, $params).then((res) => {
          let $info = res.data;
          if ($info.code == 0){
            this.loading = false
            let $resp_data = $info.data
            //过滤数组空字符串
            $resp_data.forEach((val, index) => {
              if (val == "") {
                $resp_data.pop(index)
              }
            })
            this.ajaxdata = $resp_data
            this.total = $info.count
          } else{
            util.toast(this,$info,"获取数据");
          }
        })
      },
    },
    mounted() {
      this.handleinit();
    }
  };
</script>


<style lang="less" scoped>

</style>
